<template>
  <div class="institute-box">
    <div class="banner-box"></div>
    <div class="content-box">
      <div class="part1-box">
        <PartTitle :data="part1Title" />
        <div class="part1-content">
          <div class="left"></div>
          <div class="right">
            <div class="item">挚物AIoT产业研究院（简称挚物研究院）是物联网智库旗下的专业研究机构，研究方向涵盖物联网、工业互联网、5G、人工智能、区块链、通讯、智慧城市、车联网等AIoT关联领域。</div>
            <div class="item">研究院密切关注行业发展最新动向，深入产业调研，通过一手信息和数据勾勒真实的产业图景，定期输出各类研究报告，并向政府、企业、投资基金、产业园区等机构提供专业的定制化咨询服务，包括行业研究、市场调研、前沿课题、指数研究、投资研究、尽调服务、战略咨询等。</div>
            <div class="item">协助业内机构准确、快速地了解产业动态，把握机遇、拥抱趋势，帮助传统企业智能化转型升级与产业创新，实现企业基业长青。</div>
          </div>
        </div>
      </div>
      <div class="part2-box">
        <PartTitle :data="part2Title" />
        <div class="part2-content">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) of part2Data" :key="index">
              <div class="item" :class="{active: part2ActiveIndex === index}">
                <div class="icon" :style="{backgroundImage: 'url(' + item.img + ')'}"></div>
                <div class="title">{{item.title}}</div>
                <div class="desc">{{item.desc}}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="part3-box" v-if="reportList.length">
        <PartTitle :data="part3Title" />
        <div class="part3-content">
          <!-- <Tabs /> -->
          <div class="list-box">
            <el-row :gutter="20">
              <el-col :span="6" v-if="topicList.length">
                <div class="item-box">
                  <div class="title">
                    <img src="../../assets/report.png" class="icon" alt="">
                    近期选题
                  </div>
                  <div class="content">
                    <TopicSelectionItem v-for="(item, index) of topicList.slice(0, 4)" :key="'topic' + index" :data="item" />
                  </div>
                </div>
              </el-col>
              <el-col :span="6" v-for="(item, index) of reportList" :key="'report' + index">
                <div class="item2-box">
                  <ReportItem :data="item" />
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="more-btn" v-if="start < maxPage && maxPage > 7" @click="loadMore">加载更多内容…</div>
        </div>
      </div>
      <div ref="expertsDom" class="part4-box">
        <template  v-if="part4Data.length">
          <PartTitle :data="part4Title" />
          <div class="list-box">
            <ExpertsItem v-for="(item, index) of part4Data" :key="'4' + index" :data="item" :class="{mr0: !((index+1) % 5)}" />
          </div>
        </template>
      </div>
      <div class="part5-box">
        <PartTitle :data="part5Title" />
        <div class="list-box">
          <div
            class="media"
            v-for="(item, index) of part5Data"
            :key="'5' + index"
            :style="{backgroundImage: 'url(' + item + ')'}"
            :class="{mr0: !((index + 1) % 5)}">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 标题
import PartTitle from '@/views/institute/components/PartTitle';
// 标签页
// import Tabs from '@/views/institute/components/Tabs';
import TopicSelectionItem from '@/views/home/components/TopicSelectionItem';
// 报告
import ReportItem from '@/views/institute/components/ReportItem';
// 专家
import ExpertsItem from '@/views/institute/components/ExpertsItem';
import { expertsList, articlesList, tagsList } from '@/api/api';

export default {
  components: {
    PartTitle,
    // Tabs,
    TopicSelectionItem,
    ReportItem,
    ExpertsItem
  },
  data() {
    return {
      start: 0,
      maxPage: 0,
      part1Title: {
        bgStr: 'About us',
        title: '介绍'
      },
      part2Title: {
        bgStr: 'advantage',
        title: '优势'
      },
      part2Data: [
        {
          img: require('../../assets/youshi1.png'),
          title: '品牌优势',
          desc: '物联网智库深耕AIoT产业8年，覆盖产品百万级用户群体，与业内各生态企业有广泛联系及合作，在国内首次独家发布《AIoT产业全景图谱》，并连续四年持续发布。'
        },
        {
          img: require('../../assets/youshi2.png'),
          title: '数据优势',
          desc: '挚物研究院秉持着深入市场、融入产业的理念，以业内人的角度近距离观察产业，以此为基础，搭建了完善的核心一手数据库。'
        },
        {
          img: require('../../assets/youshi4.png'),
          title: '团队优势',
          desc: '挚物研究院由经验丰富的研究员与各细分领域顶级专家组成，人员均来自国外内知名研究咨询企业、实体企业及著名高校，是一支具备丰富行业经验、前瞻分析能力及行业资源的优秀分析师团队。'
        },
        {
          img: require('../../assets/youshi3.png'),
          title: '研究范围优势',
          desc: '挚物研究院关注AIoT产业多个领域，在物联网、人工智能、通讯、车联网等均有深入研究，并围绕AIoT产业建立了研究生态。'
        }
      ],
      part2ActiveIndex: 0,
      part3Title: {
        bgStr: 'The Research Report',
        title: '研究报告'
      },
      part3Data1: [
        {
          title: '2020年蜂窝物联网模组报告'
        },
        {
          title: '王漫妮8年销售经验却无缘升职资深并不是你的资本'
        },
        {
          title: '近期选题：柔性制造行业报告'
        },
        {
          title: '近期选题：柔性制造行业报告'
        }
      ],
      topicList: [],
      reportList: [],
      // 专家数据
      part4Title: {
        bgStr: 'Team members',
        title: '挚物研究院专家'
      },
      part4Data: [],
      part5Title: {
        bgStr: 'Exposure media',
        title: '合作媒体'
      },
      part5Data: [
        require('../../assets/1.png'),
        require('../../assets/2.png'),
        require('../../assets/3.png'),
        require('../../assets/4.png'),
        require('../../assets/5.png'),
        require('../../assets/6.png'),
        require('../../assets/7.png'),
        require('../../assets/8.png'),
        require('../../assets/9.png'),
        require('../../assets/10.png'),
        require('../../assets/11.png'),
        require('../../assets/12.png'),
        require('../../assets/13.png'),
        require('../../assets/14.png'),
        require('../../assets/15.png')
      ]
    }
  },
  mounted() {
    this.getList();
    this.getReportList();
    this.getTopic();
    if (this.$route.query.position === 'experts') {
      const _this = this;
      setTimeout(function() {
        _this.$refs.expertsDom.scrollIntoView();
      }, 200);
    }
  },
  methods: {
    // 获取报告选题列表
    async getTopic() {
      const params = {
        status: 1,
        type: 'XT'
      };
      const res = await tagsList(params);
      this.topicList = res.list || [];
    },
    // 获取专家列表
    async getList() {
      const params = {
        status: 1
      };
      const res = await expertsList(params);
      this.part4Data = res.list || [];
    },
    // 获取挚物研究院报告列表
    async getReportList() {
      const params = {
        type: 'BG',
        status: 1,
        limit: 20,
        start: this.reportList.length
      };
      const res = await articlesList(params);
      this.maxPage = res.count;
      this.reportList = this.reportList.concat(res.list || []);
    },
    // 加载更多
    loadMore() {
      this.getReportList();
    }
  }
}
</script>

<style lang="scss" scoped>
.institute-box {
  background: #F1F1F1;
  .banner-box {
    width: 100%;
    height: 600px;
    background: url('../../assets/yanjiuyuan-banner.png') no-repeat;
    background-size: 100% 100%;
  }
  .content-box {
    width: 1180px;
    margin: 0 auto;
    .part1-box {
      padding-top: 52px;
      margin-bottom: 52px;
      .part1-content {
        margin-top: 32px;
        overflow: hidden;
        .left {
          float: left;
          width: 456px;
          height: 200px;
          background: url('../../assets/yanjiuyuan-banner.png') no-repeat;
          background-size: cover;
          margin-right: 24px;
        }
        .right {
          float: left;
          width: 700px;
          height: 200px;
          font-size: 16px;
          
          font-weight: 400;
          color: #272727;
          line-height: 24px;
          .item {
            margin-bottom: 16px;
          }
        }
      }
    }
    .part2-box {
      margin-bottom: 52px;
      .part2-content {
        padding-top: 32px;
        .item {
          padding: 48px 20px 20px;
          background: #FFFFFF;
          border-radius: 4px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          cursor: pointer;
          .icon {
            width: 80px;
            height: 80px;
            background-size: cover;
            margin: 0 auto 12px;
          }
          .title {
            height: 30px;
            font-size: 20px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #272727;
            line-height: 30px;
            text-align: center;
            margin-bottom: 20px;
          }
          .desc {
            // width: calc(100% -40px);
            height: 132px;
            font-size: 14px;
            
            font-weight: 400;
            color: #4C4C4C;
            line-height: 22px;
            text-align: center;
          }
          &:hover {
            background: rgba(249, 104, 104, 0.06);
            position: relative;
            &::after {
              position: absolute;
              top: 0;
              left: 0;
              content: '';
              width: 100%;
              height: 4px;
              background: #F96868;
              border-radius: 4px 4px 0px 0px;
            }
          }
        }
      }
    }
    .part3-box {
      padding-bottom: 52px;
      .part3-content {
        padding-top: 32px;
        .list-box {
          margin-top: 24px;
          border-radius: 4px;
          .item-box {
            background: #FFFFFF;
            margin-bottom: 20px;
            .title {
              height: 72px;
              background: #F9F9F9;
              border-radius: 4px 4px 0px 0px;
              font-size: 20px;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #272727;
              line-height: 28px;
              padding: 24px 20px;
              box-sizing: border-box;
              border-radius: 4px 4px 0 0;
              .icon {
                width: 24px;
                height: 24px;
                margin-right: 8px;
                margin-top: 2px;
                vertical-align: top;
              }
            }
            .content {
              padding: 0 20px;
            }
          }
          .item2-box {
            margin-bottom: 20px;
          }
        }
        .more-btn {
          width: 200px;
          height: 48px;
          background: #FFFFFF;
          border-radius: 4px;
          border: 1px solid #D8D8D8;
          font-size: 16px;
          
          font-weight: 400;
          color: #4C4C4C;
          text-align: center;
          line-height: 48px;
          margin: 32px auto 0;
          cursor: pointer;
          &:active {
            opacity: 0.8;
          }
        }
      }
    }
    .part4-box {
      margin-bottom: 32px;
      .list-box {
        padding-top: 32px;
        overflow: hidden;
        .mr0 {
          margin-right: 0;
        }
      }
    }
    .part5-box {
      padding-bottom: 40px;
      .list-box {
        padding-top: 32px;
        overflow: hidden;
        .media {
          width: 220px;
          height: 100px;
          background-size: cover;
          margin-right: 20px;
          margin-bottom: 32px;
          float: left;
          &.mr0 {
            margin-right: 0;
          }
        }
      }
    }
  }
}
</style>